<template>
	<div class="my-contain">
		<el-container>
			<el-aside width="200px">
				<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"
					@open="handleOpen" @close="handleClose" style="overflow: hidden;">
					<el-menu-item index="MyHouse">
						<i class="el-icon-s-home"></i>
						<span slot="">我的房源</span>
					</el-menu-item>
					<el-menu-item index="CommitHouse">
						<i class="el-icon-circle-plus-outline"></i>
						<span slot="title">发布房源</span>
					</el-menu-item>
					<el-submenu index="MyOrder">
						<template slot="title">
							<i class="el-icon-goods"></i>
							<span>我的订单</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="MyOrder">我的购买</el-menu-item>
							<el-menu-item index="MySale">我的卖出</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-menu-item index="ChangePwd">
						<i class="el-icon-setting"></i>
						<span slot="title">修改密码</span>
					</el-menu-item>
<!-- 					<el-menu-item index="ImgUpload">
						<i class="el-icon-setting"></i>
						<span slot="title">修改密码</span>
					</el-menu-item> -->
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 'MyHouse',
			}
		},
		updated() {
			this.activeIndex = this.$route.name
		},
		methods: {
			handleSelect(key, keyPath) {
				this.$router.push({
					name: key
				})
			},
			handleOpen(key, keyPath) {
				// console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				// console.log(key, keyPath);
			}
		}
	}
</script>

<style scoped>
	.my-contain {
		width: 1200px;
		margin: 20px auto;
	}

	.el-main {
		padding: 15px !important;
	}
</style>
